/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';


import TabNavigator from 'react-native-tab-navigator';
import ScrollableTabView  from 'react-native-scrollable-tab-view';

var Header = require("./Component/Header");

import WeixinTabBar from './WeixinTabBar';

var TabDevice = require("./TabDevice");
var TabFind = require("./TabFind");
var TabSetting = require("./TabSetting");

var _navigator;

class MainTab extends Component {
	constructor(props) {
        super(props);
        this.state = {
			tabNames: ['设备', '发现','我的'],
			tabKey:['page1','page2','page3'],
			tabIconNames: ['Tab1', 'Tab3','Tab2'],
		};
        
       	_navigator = this.props.navigator;
    }
	
	
    render() {
    	let tabNames = this.state.tabNames;
    	let tabIconNames = this.state.tabIconNames;
    	let tabKeyNames = this.state.tabKey;
	    return (
	    	<View style={{flex: 1}}>
				<ScrollableTabView
					locked={true}
		            renderTabBar={() => <WeixinTabBar tabKey={tabKeyNames} tabNames={tabNames} tabIconNames={tabIconNames}/>}
		            tabBarPosition='bottom'>
		            <View style={styles.content} tabLabel='key1' key="1">
		                <TabDevice navigator={_navigator}/>
		            </View>
		            <View style={styles.content} tabLabel='key2' key="2">
		                <TabFind navigator={this.props.navigator}/>
		            </View>
		            <View style={styles.content} tabLabel='key3' key="3">
		                <TabSetting navigator={this.props.navigator}/>
		            </View>
		        </ScrollableTabView>
			</View>
	    );
    }
}

const styles = StyleSheet.create({
  	container: {
    	flex: 1,
  	},
  	welcome: {
    	fontSize: 20,
    	textAlign: 'center',
    	margin: 10,
  	},
  	instructions: {
    	textAlign: 'center',
    	color: '#333333',
    	marginBottom: 5,
  	},
  	tab: {
        height: 52,
        backgroundColor: '#303030',
        alignItems: 'center',
    },
    tabIcon: {
        width: 30,
        height: 35,
        resizeMode: 'stretch',
        marginTop: 12.5
    },
    content: {
		alignItems: 'center',
		justifyContent: 'center',
		flex: 1
	}
});

module.exports = MainTab;
